<!--
 * @Author: GKN
 * @Date: 2023-07-18 09:20:07
 * @LastEditTime: 2024-01-22 16:37:04
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\components\header1.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="topBox1">
      <div class="back-fff mainPadding" style="box-shadow: 4px 0px 7px 0px rgba(5, 5, 5, .3);">
        <div class="max-w navigationMain">
        <div class="navs" style="width: 79%;">
          <div class="navsItems navsItem" v-for="(item,i) in navs" :key="i" @click="navClick(item,i)">
            <div class="omit" :style="headerIndex==i?'color:#D10B00;':'color:#333;'">{{ item.name }}</div>
            <div :class="headerIndex==i?'line1':'line2'"></div>
          </div>
        </div>
        <div style="width: 200px;height: 32px;">
          <el-input placeholder="搜索" v-model="searchStr" style="width: 200px;height: 32px;">
            <template #append>
              <img @click="search" class="cursor-p" style="width: 30px;height: 30px;" src="@/assets/img/search.png" alt="">
            </template>
          </el-input>
        </div>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import CryptoJS from 'crypto-js';
  import { ref,watch, onMounted,getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  import { useRoute, useRouter } from "vue-router";
  const Router = useRouter();
  import { ArrowDown } from '@element-plus/icons-vue'
  import { useStore } from 'vuex';
  const store = new useStore();
    // 头部广告
    const nums = ref(9)
    const navs=ref([
      // {name:'首页',path:'/'},
      // {name:'政务资讯',path:'/politics'},
      // {name:'创新企业',path:'/ie'},
      // {name:'重要活动',path:'/mainAc'},
      // {name:'案例征集',path:'/case'},
      // {name:'智库咨询',path:'/imptAc'},
      // {name:'成果库',path:'/ach'},
      // {name:'创新大讲堂',path:'/inn'},
    ])
    // 导航列表
    let emit = defineEmits();
    const show = () => {
      emit("show");
    };
    const getNav = ()=>{
      proxy.$http.request(proxy.$api.list_nav,'get',{},false, function (res) {
        if(res&&res.data){
          localStorage.setItem( 'headerTabs', JSON.stringify(res.data.data.list));
          store.commit('changeTabs', res.data.data.list)
          res.data.data.list.map((item)=>{
            if(item.name == '首页'){
              item.path = '/'
            }
            // 政务资讯
            if(item.id == 4){
              item.path = '/politics'
            }
            // 创新企业
            if(item.id == 3){
              item.path = '/ie'
            }
            // 重要活动
            if(item.id == 6){
              item.path = '/mainAc'
            }
            // 案例征集
            if(item.id == 5){
              item.path = '/case'
            }
            // 智库咨询
            if(item.id == 7){
              item.path = '/imptAc'
            }
            // 成果库
            if(item.id == 1){
              item.path = '/ach'
            }
            // 创新大讲堂
            if(item.id == 2){
              item.path = '/inn'
            }
            navs.value.push(item)
          })
          show()
        }
      })
    }
    getNav()
    const loginData = ref('')
    const user = ref({name:''})
    const headerIndex = ref(localStorage.getItem( 'tabsStatus')?localStorage.getItem( 'tabsStatus'):0)
    const searchStr = ref('')
    const search=()=>{
      if(!searchStr.value){
          proxy.$comJs.msg('error','请填入标题/内容')
          return;
      }
      Router.push({
          path:'/animatedly/listSearch',
          query:{
              ob:proxy.$comJs.encry({
                  title:searchStr.value,
                  ty:1,
                  form:{
                    name:searchStr.value,
                    year:'',
                    vt: '',
                  },
                  first_title:'首页',
              })
          }
      });
  }
  watch(() => Router.currentRoute.value,(newValue) => {
    headerIndex.value = localStorage.getItem( 'tabsStatus')
    },
    { immediate: true }
  )
    const navClick=(item,i)=>{
      headerIndex.value = i
      localStorage.setItem( 'tabsStatus', i )
      store.state.headerIndex = i
      const ob = CryptoJS.AES.encrypt(JSON.stringify(item.name),'name').toString();
      if(item.path) Router.push({
        path:item.path,
        query:{
          ob:ob
        }
      });
    }
</script>
  <style lang="less">
    .topBox1{
      width: 100%;
      position: fixed;
      top: 111px;
      left: 0;
      z-index:2009;
      .header{
        width: 100%;
        background: #fff;
        padding-top:25px;
        padding-bottom: 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        .logo{
          width: 345px;
          height: 62px;
        }
        .roght{
          display: flex;
          align-items: center;
          .banner{
            width: 480px;
            height: 80px;
          }
          .loginMain{
            margin-left: 100px;
            .time{
              color: #D10B00;
              line-height: 16px;
              font-size: 14px;
            }
            .bom{
              display: flex;
              margin-top: 20px;
              .bomItem:last-child{
                margin:0;
              }
              .bomItem{
                min-width: 50px;
                cursor: pointer;
                display: flex;
                align-items: center;
                margin-right: 20px;
                justify-content: center;
                span{
                  font-size: 14px;
                  font-family: MicrosoftYaHei;
                  color: #333333;
                  line-height: 16px;
                }
                div{
                  width: 1px;
                  height: 10px;
                  background: #333333;
                  margin-left: 20px;
                }
              }
            }
          }
        }
        
      }
      .navigationMain{
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        height: 60px;
        .navs{
          display: flex;
          height: 60px;
          .navsItem{
            // width: 140px;
            height: 60px;
            color: #333333;
            font-size: 16px;
            position: relative;
            line-height: 60px;
            cursor: pointer;
            text-align: center;
            .line1{
              width: 80%;
              height: 4px;
              background: #D10B00;
              position: absolute;
              bottom: 0;
              left: 12px;
            }
            .line2{
              width: 80%;
              height: 4px;
              background: rgba(0,0,0,0);
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
        }
      }
    }
    .bannerImg{
      width: 480px;
      height: 80px;
    }
    .line{
      width: 100%;
      height: 6px;
      background: #D10B00;
    }
    .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
  .selectUser{
    width: 106px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .item{
      font-size: 13px;
      line-height: 30px;
      color: #333;
      
    }
    .item:hover{
        color: #D10B00;
      }
  }
  </style>